<!-- 订单记录 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true" :resetShow="true"
    @reset="handleReset" @download="exportXlsx">
    <template #form>
      <GameItem ref="GameItemRef" @query="queryGame" />
      <el-form-item :label="$t('48')">
        <el-select v-model="data.query.action_type" :placeholder="$t('340')">
          <el-option :label="$t('21')" :value="-1" />
          <el-option v-for="item in ACTIONTYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('53')">
        <el-select v-model="data.query.state" :placeholder="$t('340')">
          <el-option :label="$t('21')" :value="-1" />
          <el-option v-for="item in ORDERSTATE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('505')">
        <el-select v-model="data.query.reason" :placeholder="$t('340')">
          <el-option :label="$t('21')" value="" />
          <el-option v-for="item in OrderMessage" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" :placeholder="$t('340')">
          <el-option v-for="item in USERCEXT" v-show="item.value != 2" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
        <el-input class="width200" v-model="data.query.search_value" :placeholder="$t('19')" />
      </el-form-item>
      <el-form-item :label="$t('56')">
        <el-input v-model="data.query.order_id" :placeholder="$t('19')" />
      </el-form-item>
      <el-form-item :label="$t('40')">
        <el-input v-model="data.query.round_id_str" :placeholder="$t('19')" />
      </el-form-item>
      <el-form-item :label="$t('39')">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" :start-placeholder="$t('26')"
          :end-placeholder="$t('27')" value-format="YYYY-MM-DD" :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button>
      <!-- <div class="flex allData">
        <p>{{$t('orderList.zxzje')}}{{ BigWan(data.sum.sum_bet ?? 0)  }}</p>
        <p>{{$t('orderList.zy')}}<span class="colorGre">{{ BigWan(data.sum.sum_win ?? 0) }}</span></p>
        <p>{{$t('orderList.zs')}}<span class="colorRed">{{ BigWan(data.sum.sum_lose ?? 0) }}</span></p>
        <p>{{$t('orderList.xzcs')}}{{data.sum.bet_times}}</p>
        <p>{{$t('orderList.yebd')}}<span :class="BigWan(data.sum.sum_amount ?? 0) > 0 ? 'colorGre' : 'colorRed'">{{ BigWan(data.sum.sum_amount ?? 0) }}</span></p>
      </div> -->
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'account_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.account_id, 1)">
              {{ scope.row.account_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account'" #default="scope">
            <span class="item_details" @click="checkUser(scope.row.account3d, 3), data.checkedItem = scope.row">
              {{ scope.row.account }}
            </span>
          </template>
          <template v-if="item.prop == 'game_type'" #default="scope">
            <el-tag type="primary">{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'before'" #default="scope">
            <span :class="colorClass(scope.row.before)">{{ BigWan(scope.row.before) }}</span>
          </template>
          <template v-if="item.prop == 'after'" #default="scope">
            <span :class="colorClass(scope.row.after)">{{ BigWan(scope.row.after) }}</span>
          </template>
          <template v-if="item.prop == 'bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.bet) }}</span>
          </template>
          <template v-if="item.prop == 'created_time_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.created_time_stamp) }}
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <GameHeaderInfo :game_id="scope.row.game_id"/>
          </template>
          <template v-if="item.prop == 'state'" #default="scope">
            <el-tag :type="scope.row.msgId == 10001 ? 'warning' : scope.row.state == 1 ? 'success' : 'danger'">{{
              scope.row.msgId == 10001 ? $t('506') : selectToLabel(ORDERSTATE, scope.row.state) }}</el-tag>
          </template>
          <template v-if="item.prop == 'msgId'" #default="scope">
            <span v-show="scope.row.state == 1">{{ $t('487') }}</span>
            <span v-show="scope.row.state != 1 && selectToLabel(OrderMessage, scope.row.msgId)">{{
              selectToLabel(OrderMessage, scope.row.msgId) }}</span>
          </template>
          <template v-if="item.prop == 'ip'" #default="scope">
            {{ scope.row.ip }}({{ scope.row.ip_country }})
          </template>
          <template v-if="item.prop == 'action_type'" #default="scope">
            <el-tag :type="scope.row.action_type == 1 ? 'primary' : 'danger'">{{
              selectToLabel(ACTIONTYPE, scope.row.action_type)
            }}</el-tag>
          </template>
          <template v-if="item.prop == 'wallet_type'" #default="scope">
            <el-tag type="primary">{{ selectToLabel(APITYPEShow, scope.row.wallet_type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'amount'" #default="scope">
            <span :class="scope.row.amount >= 0 ? 'colorGre' : 'colorRed'">{{
              BigWan(scope.row.amount)
            }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" width="120">
        <template #header>
          <el-tooltip effect="dark" placement="top">
            <template #content> {{ $t('310') }} </template>
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          {{ $t('46') }}
        </template>
        <!-- 此条订单记录的服务器日志 -->
        <template #default="scope">
          <el-button type="primary" :disabled="scope.row.err_desc ? false : true" @click="openDetail(scope.row)">
            {{ $t('47') }}
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>
  <!-- 订单详情 -->
  <OrderDetails :show="data.defaultDialog" :checkedItem="data.checkedItem" @onHideDetails="onHideDetails" />
  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed, watch } from 'vue'
import { getRecordList } from '@/api/user'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import OrderDetails from '@/views/users/components/order-details.vue'
import UserDetails from '@/views/users/components/user-details.vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import { getDateDay, setTimeValue, setTimestampTime } from '@/utils/time'
import { ORDERSTATE, USERCEXT, ACTIONTYPE, GAMETYPE, GAMEICON, APITYPE, OrderMessage, APITYPEShow } from '@/config/eunm'
import { selectToLabel, colorClass, GamePlatform, GameName } from '@/utils/index'
import { BigWan } from '@/utils/math'
import { exportToExcel } from '@/utils/export'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

interface SumType {
  bet_times: number,
  sum_amount: number,
  sum_bet: number,
  sum_lose: number,
  sum_win: number,
}
interface ParamType {
  err: string,
  other: any,
  req: {
    method: string,
    param: any,
    url: string
  },
  rsp: string,
  status_code: number
}

const data = reactive({
  query: {
    start_time: '', // 开始时间
    end_time: '', // 结束时间
    search_type: 1, // 1是平台id 2玩家昵称 3平台名称
    search_value: '', // 搜索的值
    game_id: -1,
    platform: -1, // 品牌
    state: -1,
    reason: '', // 订单原因
    order_id: '', // 订单编号
    round_id_str: '', // 牌局编号
    action_type: -1,// 订单类型
    date: [getDateDay(0), getDateDay(0)],
    page: 1,
    size: 50
  },
  list: [],
  total: 0,
  sum: <SumType>{},
  fields: [
    { label: t('24'), prop: 'created_time_stamp', width: '200', visible: true, tips: t('300') },
    { label: t('56'), prop: 'order_id', width: '230', visible: true, tips: t('301') },
    { label: t('40'), prop: 'round_id_str', width: '200', visible: true, tips: t('302', { br: '<br>' }) },
    { label: t('17'), prop: 'account_id', width: '120', visible: true, tips: t('289') },
    { label: t('18'), prop: 'account', width: '150', visible: true, tips: t('290') },
    { label: t('53'), prop: 'state', width: '110', visible: true, tips: t('303', { br: '<br>' }) },
    { label: t('505'), prop: 'msgId', width: '160', visible: true, tips: t('544') },
    { label: t('41'), prop: 'game_id', width: '180', visible: true, tips: t('541') },
    { label: t('62'), prop: 'game_type', width: '120', visible: true, tips: t('542') },
    { label: t('63'), prop: 'before', width: '150', visible: true, tips: t('304') },
    { label: t('64'), prop: 'after', width: '150', visible: true, tips: t('305') },
    { label: t('44'), prop: 'bet', width: '150', visible: true, tips: t('306') },
    { label: t('65'), prop: 'amount', width: '150', visible: true, tips: t('307') },
    { label: 'IP', prop: 'ip', width: '180', visible: true, tips: t('545') },
    // { label: t('66'), prop: 'multiplier', width: '150', visible: true, tips: t('308', { br: '<br>' }) },
    { label: t('48'), prop: 'action_type', width: '100', visible: true, tips: t('309', { br: '<br>' }) },

  ],
  dialogVisible: false,
  exportLoading: false,
  defaultDialog: false,
  isUserDetails: false,
  checkedItem: {} as any, //  详情日志
})

// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await getRecordList(data.query)
  indexStore.setPageLoading(false)
  res.data.list.result?.forEach((item: any) => {
    item.msgId = 0
    item.uid = item.user_id
    try {
      if (item.wallet_type == 1) {
        if (JSON.parse(item.err_desc) && JSON.parse(item.err_desc).rsp && JSON.parse(item.err_desc).rsp?.includes('code')) {
          if (item.wallet_type == 1 && JSON.parse(item.err_desc).rsp) {
            item.msgId = JSON.parse(JSON.parse(item.err_desc).rsp).code ? JSON.parse(JSON.parse(item.err_desc).rsp).code : 0
          }
        }
      } else {
        if (JSON.parse(item.err_desc) && JSON.parse(item.err_desc).rsp && JSON.parse(item.err_desc)?.rsp?.status) {
          if (JSON.parse(item.err_desc).rsp && JSON.parse(item.err_desc)?.rsp?.status == 1) {
            item.msgId = 1
          } else if (JSON.parse(item.err_desc)?.rsp?.status == 50007) {
            item.msgId = 10001
          } else {
            item.msgId = 0
          }
        }
      }
    } catch (error) {
      item.msgId = 0
    }
  })
  data.list = res.data.list.result ?? []
  // data.sum = res.data.list.sum as SumType
  data.total = res.data.total
}

// 点击商户id 修改名称
const checkUser = (val: string, type: number) => {
  if (type == 1) {
    data.query.search_type = type
    data.query.search_value = val
    getSearchList()
  } else {
    data.isUserDetails = true
  }
}

// 详情
const openDetail = (desc: any) => {
  data.defaultDialog = true
  data.checkedItem = desc
}

// 修改页数
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSize = (val: number) => {
  data.query.size = val
}

const exportXlsx = async () => {
  data.exportLoading = true
  let query = JSON.parse(JSON.stringify(data.query))
  query.page = 1
  query.size = 100000
  let res = await getRecordList(query)
  let dataList = res.data.list.result

  let header: string[] = []
  let list: never[][] = []

  data.fields.forEach((item) => {
    header.push(item.label)
  })

  dataList.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields.forEach((x) => {
      switch (x.prop) {
        case 'created_time_stamp':
          arr.push(setTimestampTime(item[x.prop]) as never)
          break
        case 'bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'before':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'after':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'amount':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'game_id':
          arr.push(GameName(indexStore.gameArray, item[x.prop]) as never)
          break
        case 'wallet_type':
          arr.push(selectToLabel(APITYPE, item[x.prop]) as never)
          break
        case 'state':
          arr.push(selectToLabel(ORDERSTATE, item[x.prop]) as never)
          break
        case 'msgId':
          arr.push(selectToLabel(OrderMessage, item[x.prop]) as never)
          break
        case 'game_type':
          arr.push(selectToLabel(GAMETYPE, item[x.prop]) as never)
          break
        case 'action_type':
          arr.push(selectToLabel(ACTIONTYPE, item[x.prop]) as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })

  exportToExcel(list, header, t('9'))
  data.exportLoading = false
}

// 重置查询 
const handleReset = () => {
  data.query = {
    start_time: '', // 开始时间
    end_time: '', // 结束时间
    search_type: 1, // 1是平台id 2玩家昵称 3平台名称
    search_value: '', // 搜索的值
    game_id: -1,
    reason: '', // 订单原因
    platform: -1, // 品牌
    state: -1,
    order_id: '', // 订单编号
    round_id_str: '', // 牌局编号
    action_type: -1,// 订单类型
    date: [getDateDay(0), getDateDay(0)],
    page: 1,
    size: 50
  }
  GameItemRef.value.onHideDetails()
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

const GameItemRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.exportLoading = false
  data.defaultDialog = false
  data.isUserDetails = false
  data.checkedItem = {} as any
  if (show) {
    data.query = {
      start_time: '', // 开始时间
      end_time: '', // 结束时间
      search_type: 1, // 1是平台id 2玩家昵称 3平台名称
      search_value: '', // 搜索的值
      game_id: -1,
      platform: -1, // 品牌
      state: -1,
      reason: '', // 订单原因
      order_id: '', // 订单编号
      round_id_str: '', // 牌局编号
      action_type: -1,// 订单类型
      date: [getDateDay(0), getDateDay(0)],
      page: 1,
      size: 50
    }
    GameItemRef.value.onHideDetails()
    getSearchList()
  }
}
</script>

<style scoped lang="scss">
.allData {
  margin-top: 10px;

  p {
    font-size: 18px;
    font-weight: bold;
    margin-right: 30px
  }
}

.list-obj {
  margin-bottom: 40px;

  .list {
    display: flex;
    min-height: 32px;
    line-height: 26px;
    border: 1px solid var(--el-table-tr-bg-color);

    .label {
      width: 120px;
      font-size: 16px;
      flex-shrink: 0;
    }
  }
}
</style>
